<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>入住登记</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
    <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
    <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
    <!--LOADING STYLESHEET FOR PAGE-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
    <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
    <!--新增加的css样式-->
    <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
    <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/js/stay/jquery.highlight-5.js}"></script>
    <script th:src="@{/control/calendar/WdatePicker.js}"></script>
    <style>
        #reserve_tab tr td div{
            color: red;
            display: inline-block;
            display: none;
        }
    </style>
</head>
<body class=" ">
    <div>
        <!--BEGIN BACK TO TOP-->
        <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
        <!-- 引用头部 -->
        <div th:replace="common/top::topFragment"></div>
        <!--END TOPBAR-->
        <div id="wrapper">
            <!-- 引用左菜单导航栏 -->
            <div th:replace="common/leftToolBar::leftToolbar"></div>
            <!--END CHAT FORM-->
            <!--BEGIN PAGE WRAPPER-->
            <div id="page-wrapper">
                <!-- 引用工具条 -->
                <div th:replace="common/toolBar::toolBar"></div>
                <!--END TITLE & BREADCRUMB PAGE-->
                <!--BEGIN CONTENT-->
                <!--右侧区内容的编写 -->
                <div class="page-content">
                    <div th:replace="stay/common/modal::modal"></div>
                    <!-- 入住登记面板 -->
                    <div class="panel panel-grey">
                        <div class="panel-heading">
                            <h1 class="panel-title">入住登记</h1>
                        </div>
                        <form action="" id="checkInRegister" method="post" class="panel-body" style="margin-right: 15px; position: relative;">
                            <table width="1228px" height="200px" style="font-size: 16px;" id="reserve_tab">
                                <tr>
                                    <td><label>客户姓名：</label><input name="customer.name" id="name"/><div id="name_errorMag" >请输入姓名</div></td>
                                    <td><label>身份证号：</label><input name="customer.idNumber" style="text-indent: 8px" placeholder="请输入18位身份证号" id="idNumber"/><div id="idNumber_errorMag">请输入身份证号</div></td>
                                    <td><label>证件类型：</label><input name="customer.idType" id="idType"/><div id="idType_errorMag">请输入证件类型</div></td>
                                </tr>
                                <tr>
                                    <td><label>出生日期：</label><input name="customer.birthday" readonly id="birthday" onclick="WdatePicker()"/><div id="birthday_errorMag">请输入出生日期</div></td>
                                    <td><label>民族：</label><input name="customer.nation" id="nation"/><div id="nation_errorMag">请输入民族</div></td>
                                    <td><label>手机号：</label><input name="customer.phone" style="text-indent: 10px" placeholder="请输入11位手机号" id="phone"/><div id="phone_errorMag">请输入手机号</div></td>
                                </tr>
                                <tr>
                                    <td><label>地址：</label><input name="customer.address" id="address"/><div id="address_errorMag"></div></td>
                                    <td>
                                        <label>性别：</label>
                                            <select name="customer.sex" id="sex">
                                                <option value="-1">请选择</option>
                                                <option value="男">男</option>
                                                <option value="女">女</option>
                                            </select>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <label>是否会员：</label>
                                            <select name="customer.member" id="member">
                                                <option value="-1">请选择</option>
                                                <option value="1">是</option>
                                                <option value="0">否</option>
                                            </select>
                                        <div id="sexAndMember_errorMag">请选择性别或会员</div>
                                    </td>
                                    <td><label>预订时间：</label><input name="reservedDate" id="reservedDate" style="text-indent: 10px" readonly/><div id="reservedDate_errorMag">请输入预订时间</div></td>
                                </tr>
                                <tr>
                                    <td><label>入住时间：</label><input name="checkInDate" id="checkInDate" style="text-indent: 10px" onclick="WdatePicker()"/><div id="checkInDate_errorMag">请输入入住时间</div></td>
                                    <td><label>离店时间：</label><input name="checkOutDate" id="checkOutDate" style="text-indent: 10px" onclick="WdatePicker()"/><div id="checkOutDate_errorMag">请输入离店时间</div></td>
                                    <td>
                                        <button type="button" id="checkIn" class="btn btn-grey" onclick="checkInRegister()">入住</button>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <button type="button" class="btn btn-grey" onclick="javascript:document.getElementById('checkInRegister').reset();var inputs = $('#reserve_tab tr td input:not(#address)'); /*全部文本框*/inputs.css('border','solid 1px').next().css('display','none');var selects = $('#reserve_tab tr td select');/*全部下拉框*/$(selects.css('border','solid 1px')[1]).next().css('display','none');">重置</button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- 添加预订时安排房间面板 -->
                    <div class="panel panel-grey">
                        <div class="panel-heading">
                            <h1 class="panel-title">入住可安排的房间</h1>
                        </div>
                            <div style="margin: 11px 0px 11px 12px " id="roomTypeContainer">
                                <button class="btn btn-grey type-name-btn" th:onclick="getRoomByTypeName([[${roomType.typeName}]],this)" th:each="roomType : ${roomTypes}" th:value="${roomType.roomTypeId}">[[${roomType.typeName}]](<span style="color: rgba(255,255,255,0.8);font-weight: bold;font-size: 17px">[[${roomType.usable}]]</span>)</button>
                            </div>
                            <div style="height: 500px;overflow: auto">
                                <table id="roomTab" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>选择</th>
                                            <th>房间号</th>
                                            <th>楼层</th>
                                            <th>价格/天</th>
                                            <th>价格/时</th>
                                            <th>会员价/天</th>
                                            <th>会员价/时</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="room : ${rooms}">
                                            <td><input type='radio' th:value="${room.roomId}" name='room.roomId'/></td>
                                            <td th:text="${room.roomId}"></td>
                                            <td th:text="${room.floor.floorName}"></td>
                                            <td th:text="${room.priceDay}"></td>
                                            <td th:text="${room.priceHour}"></td>
                                            <td th:text="${room.memberPriceDay}"></td>
                                            <td th:text="${room.memberPriceHour}"></td>
                                            <td th:text="${room.status.statusName}"></td>
                                            <td style="display: none" th:text="${room.roomType.price}"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <!-- 支付框 -->
                    <div class="modal fade" id="moneyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 115px">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">支付操作</h4>
                                </div>
                                <div class="modal-body" id="content" style="font-size: 17px;text-align: center">
                                    <div>
                                        <label>押金：</label><span style="color: red;" id="price">0.00</span>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <label>房间价格：</label><span style="color: red;" id="roomTotalMoney">0.00</span>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <label id="memberOrNotMemberTotalMoney">总价格：</label><span style="color: red;" id="totalMoney">0.00</span>
                                    </div>
                                    <div style="margin-top: 10px">
                                        <label>支付：</label><input id="payMoney">
                                    </div>
                                </div>
                                <div class="modal-footer" id="btnContainer">
                                    <button type="button" class="btn btn-primary" id="confirm">确定</button>
                                    <button type="button" id="close" class="btn btn-info" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <!--END CONTENT-->
            </div>
            <!-- 引用底部 -->
            <div th:replace="common/bottom::bottom"></div>
            <!--END FOOTER-->
            <!--END PAGE WRAPPER-->
        </div>
    </div>
<script th:src="@{/js/stay/reserve.js}"></script>
<script th:src="@{/js/stay/modal.js}"></script>
<script th:src="@{/js/stay/stay.js}"></script>
<script src="../static/js/jquery-ui.js" th:src="@{/js/jquery-ui.js}"></script>
<script>
    //输入身份证号查询客户
    $(function () {
        //显示当前功能导航
        showModuleText("入住登记");
        //来到添加预订页面时默认显示标准单人间下的房间并选中标准单人间选项卡
        $($(".type-name-btn")[0]).addClass("active");
        //给身份证号文本框绑定即时文本改变事件，方便来获取当前输入的身份证号对应的预订信息或客户信息实现信息自动补齐功能
        $("#idNumber").bind("input propertychange",function () {
            var url = "/orders/getOrdersOrCustomerInfos";
            var param = "idNumber=" + $(this).val();
            $.ajax({
                url:url,
                type:"post",
                data:param,
                dataType:"json",
                success:function (data) {
                    var customerData = [];//保存客户信息
                    //将json数据封装到数组中
                    $.each(data,function (index,orders) {
                        var status = null;//显示和隐藏的状态名
                        if(orders.ordersId == null) status = "可预订入住";
                        else
                            if(orders.status.statusId == 8 || orders.status.statusId == 9) status = "可预订入住";
                            else status = orders.status.statusName;
                        //将数据保存到数组中
                        customerData[index] = {
                            label:orders.customer.name+" "+orders.customer.idNumber+" "+ status,
                            value:orders.customer.idNumber,
                            state:orders.customer.status,
                            ordersStatus:status
                        }
                    });
                    //通过autocomplete插件实现自动补全
                    var state = 0;
                    $("#idNumber").autocomplete({
                        source:customerData,//数据源
                        select:function (event,ui) { //当选择某一个时触发
                            if (ui.item.state == 0) {
                                showModal("警告提示","该账户是本店的黑名单不可入住");
                                state = 1;
                                return;
                            }
                            if(ui.item.ordersStatus == "入住中"){
                                showModal("温馨提示","抱歉该账户目前正在入住中不可再次入住");
                                state = 1;
                                return;
                            }
                            var url = "/orders/getOrdersOrCustomerInfo";
                            var param = "idNumber="+ui.item.value
                            $.post(url,param,function (data) {
                                //获取数据并写入到指定文本框中
                                $("#name").val(data.customer.name);
                                $("#idType").val(data.customer.idType);
                                $("#birthday").val(data.customer.birthday);
                                $("#nation").val(data.customer.nation);
                                $("#phone").val(data.customer.phone);
                                $("#address").val(data.customer.address);
                                $("#sex").val(data.customer.sex);
                                $("#member").val(data.customer.member);
                                //如果等于9或8，表示之前取消过预订或已结算离店，不将取消预订的时间写入置值为空
                                if (data.status != null){
                                    if (data.status.statusId == 9 || data.status.statusId == 8){
                                        $("#reservedDate").val("");
                                        $("#checkOutDate").val("");
                                    }else{
                                        $("#reservedDate").val(data.reservedDate);
                                        $("#checkOutDate").val(data.checkOutDate);
                                    }
                                }else{
                                    $("#reservedDate").val("");
                                    $("#checkOutDate").val("");
                                }
                                //如果有预订时间表示之前已经预订过房间，安排房间列表禁用不能选择
                                if ($("#reservedDate").val().length != 0){
                                    $("#roomTab tbody tr td input").prop("disabled",true);
                                }else{
                                    $("#roomTab tbody tr td input").prop("disabled",false);
                                }
                            });
                        },
                        close:function (event, ui) { //当显示框消失时触发
                            if (state == 1) $(this).val("");
                        }/*,
                        formatResult:function (data,count,maxCount) { //为下拉框的每一行数据使用标签处理
                            return "asdasdas";
                        }*/
                    });
                }
            });
        });
    });

    //登记入住
    function checkInRegister() {
        if (!formValidate()) return;
        var url = "/orders/getCustomerByIdNumber";
        var param = "idNumber=" + $("#idNumber").val()
        $.post(url,param,function (data) {
            if (data.status == 0){
                showModal("警告提示","该账户是本店的黑名单不可入住");
                return;
            }
            var url = "/orders/getOrdersByIdNumber";
            var param = "idNumber=" + $("#idNumber").val()+"&ordersState=入住";
            $.post(url,param,function (data) {
                if (data.length == 1){
                    $.each(data,function (index,orders) {
                        if (orders.status.statusId == 1){
                            showModal("温馨提示","抱歉当前身份证正在入住中不可再次入住");
                        }
                    });
                    return;
                }
                //根据是否会员来修改支付框的文字
                if ($("#member").val() == 1) $("#memberOrNotMemberTotalMoney").html("会员价：");
                else $("#memberOrNotMemberTotalMoney").html("总价格：");
                var totalMoney = null; //总价格
                var checkInDate = new Date($("#checkInDate").val());//入住时间
                var checkOutDate = new Date($("#checkOutDate").val());//离店时间
                //如果预订时间不为空表示之前预订过房间，直接查询该客户的预定信息计算价格
                //否则获取安排房间面板的相关房间信息进行计算
                var checkInDuration = null;//入住时间
                if ($("#reservedDate").val().length != 0 && $("#reservedDate").val().length != ''){
                    var url = "/orders/getOrdersOrCustomerInfo";
                    var param = "idNumber="+ $("#idNumber").val()
                    $.post(url,param,function (data) {
                        $("#price").html(data.room.roomType.price);
                        if (checkInDate.getMonth()+1 == checkOutDate.getMonth()+1){
                            if (checkInDate.getDate() == checkOutDate.getDate()){
                                //如果月日相等就按小时来算
                                var hours = (checkOutDate.getHours() + 1) - (checkInDate.getHours() + 1)
                                if ($("#member").val() == 1) totalMoney = data.room.memberPriceHour * hours;
                                else totalMoney = data.room.priceHour * hours;
                                checkInDuration = hours + "小时";
                            }else{
                                //如果月相等日不相等按日算
                                var day = checkOutDate.getDate() - checkInDate.getDate();
                                if ($("#member").val() == 1) totalMoney = data.room.memberPriceDay * day;
                                else totalMoney = data.room.priceDay * day;
                                checkInDuration = day + "天";
                            }
                        }else{
                            //如果月不相等将月转换为天来计算
                            var month = (checkOutDate.getMonth() + 1) - (checkInDate.getMonth() + 1);
                            var day = month * 31;
                            if ($("#member").val() == 1) totalMoney = data.room.memberPriceDay * day;
                            else totalMoney = data.room.priceDay * day;
                            checkInDuration = day + "天";
                        }
                        //设置房间价格和总价格并显示支付框
                        $("#roomTotalMoney").html(totalMoney);
                        $("#totalMoney").html(totalMoney + data.room.roomType.price);
                        $("#moneyModal").modal("show");
                    },"json");
                }else{
                    //获取用户选择的房间数据
                    var $roomInfo = $("#roomTab tbody tr td input:checked").parent().parent();
                    //设置押金
                    $("#price").html($roomInfo.children("td").last().html());
                    if (checkInDate.getMonth()+1 == checkOutDate.getMonth()+1){
                        if (checkInDate.getDate() == checkOutDate.getDate()){
                            //如果月日相等就按小时来算
                            var hours = (checkOutDate.getHours() + 1) - (checkInDate.getHours() + 1)
                            if ($("#member").val() == 1) totalMoney = parseInt($roomInfo.children("td").eq(6).html()) * hours;
                            else totalMoney = parseInt($roomInfo.children("td").eq(4).html()) * hours;
                            checkInDuration = hours + "小时";
                        }else{
                            //如果月相等日不相等按日算
                            var day = checkOutDate.getDate() - checkInDate.getDate();
                            if ($("#member").val() == 1) totalMoney = parseInt($roomInfo.children("td").eq(5).html()) * day;
                            else totalMoney = parseInt($roomInfo.children("td").eq(3).html()) * day;
                            checkInDuration = day + "天";
                        }
                    }else{
                        //如果月不相等将月转换为天来计算
                        var month = (checkOutDate.getMonth() + 1) - (checkInDate.getMonth() + 1);
                        var day = month * 31;
                        if ($("#member").val() == 1) totalMoney = parseInt($roomInfo.children("td").eq(5).html()) * day;
                        else totalMoney = parseInt($roomInfo.children("td").eq(3).html()) * day;
                        checkInDuration = day + "天";
                    }
                    //设置房间价格和总价格并显示支付框
                    $("#roomTotalMoney").html(totalMoney);
                    $("#totalMoney").html(totalMoney + parseInt($("#price").html()));
                    $("#moneyModal").modal("show");
                }
                $("#confirm").unbind("click");//清除之前的click事件
                //点击确定支付后一系列操作
                $("#confirm").click(function(){
                    //验证支付金额的合法性
                    var $payMoney = $("#payMoney").val();
                    $("#myModal").css({"margin-top":"115px","z-index":"1052"});
                    if ($payMoney == '' && $payMoney.length == 0){
                        showModal("温馨提示","请输入支付金额");
                        return;
                    }
                    if ($payMoney < parseInt($("#price").html())){
                        showModal("温馨提示","支付金额必须大于等于押金");
                        return;
                    }
                    if ($payMoney > parseFloat($("#totalMoney").html())){
                        showModal("温馨提示","抱歉您支付的金额大于了总金额");
                        return;
                    }
                    var roomId = null;
                    //获取房间号，根据预订时间来决定是获取页面的还是发请求获取预订信息中的
                    if($("#reservedDate").val() == '' && $("#reservedDate").val().length == 0){
                        roomId = $("#roomTab tbody tr td input:checked").val();
                    }else{
                        $.ajax({
                            url:"/orders/getOrdersOrCustomerInfo",
                            data:"idNumber="+ $("#idNumber").val(),
                            dataType:"json",
                            async:false,//修改为同步请求
                            success:function (data) {
                                roomId = data.room.roomId;
                            }
                        });
                    }
                    //入住登记
                    url = "/orders/addCheckInRegisterOrders";
                    param = "checkInDuration="+ checkInDuration +"&price="+ parseFloat($("#totalMoney").html()) +"&repayMoney="+ $payMoney +"&totalMoney="+ parseFloat($("#totalMoney").html()) +"&room.roomType.roomTypeId="+ $("#roomTypeContainer .active").val() +"&room.roomId="+ roomId + "&" + $("#checkInRegister").serialize();
                    $.post(url,param,function (data) {
                        if (data){
                            showModal("温馨提示","入住成功");
                            setTimeout(function(){location.href = "/orders/getOrdersList?pageNum=1&orderState=入住&orderStatus=0";},"2000");
                            return;
                        }
                        showModal("温馨提示","入住失败");
                    },"json");
                });
            },"json");
        });

    }

    //获取房型下的房间信息
    function getRoomByTypeName(typeName,btn){
        //让当前按钮高亮其他按钮取消高亮
        $(btn).addClass("active").siblings().removeClass("active");
        //发送ajax请求获取房间信息
        var url = "/orders/getRoomByTypeName";
        var param = "typeName=" + typeName + "&statusName=入住";
        $.post(url,param,function (data) {
            $("#roomTab tbody tr").remove();
            var html;
            $.each(data,function(index,room) {
                html = "<tr>";
                html += "<td><input type='radio' value='"+ room.roomId +"' name='room.roomId'/></td>";
                html += "<td>"+ room.roomId +"</td>";
                html += "<td>"+ room.floor.floorName +"</td>";
                html += "<td>"+ room.priceDay +"</td>";
                html += "<td>"+ room.priceHour +"</td>";
                html += "<td>"+ room.memberPriceDay +"</td>";
                html += "<td>"+ room.memberPriceHour +"</td>";
                html += "<td>"+ room.status.statusName +"</td>";
                html += "<td style='display: none'>"+ room.roomType.price +"</td>";
                html += "</tr>";
                $("#roomTab tbody").append(html);
            });
            //如果有预订时间表示之前已经预订过房间，安排房间列表禁用不能选择
            if ($("#reservedDate").val().length != 0){
                $("#roomTab tbody tr td input").prop("disabled",true);
            }else{
                $("#roomTab tbody tr td input").prop("disabled",false);
            }
        },"json");
    }

</script>
<!-- 引用脚本 -->
<div th:replace="common/script::script"></div>
</body>
</html>